//.main-color {
//  color: $main-color;
//}
//.main-ass-color {
//  color: $main-ass-color
//}
//.ass-red-color {
//  color: $ass-red-color
//}
//.ass-blue-color{
//  color: $ass-blue-color;
//}
//.ass-orange-color{
//  color: $ass-orange-color;
//}
.font-color {
  color: #333333;
}
.font-color-2 {
  color: rgba(28, 28, 28, 0.6);// 0.6次要内容
}
.font-color-3 {
  color: rgba(28, 28, 28, 0.4);// 0.4次要内容
}
.font-color-th {
  color: #515a6e;
}
.font-color-td {
  color: #606266;
}

.color-fff {
  color: #fff;
}


@for $i from 0 to 50 {
  $i: $i + 2;
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

@for $i from 0 to 200 {
  $i: $i + 5;
  .pr-#{$i} {
    padding-right: #{$i}px;
  }

  .pl-#{$i} {
    padding-left: #{$i}px;
  }

  .pt-#{$i} {
    padding-top: #{$i}px;
  }

  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }

  .mr-#{$i} {
    margin-right: #{$i}px;
  }

  .ml-#{$i} {
    margin-left: #{$i}px;
  }

  .mt-#{$i} {
    margin-top: #{$i}px;
  }

  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }

}

@for $i from 0 to 10 {
  $i: $i + 1;
  .flex-#{$i} {
    flex: #{$i}px;
  }
}

.width-30 {
  width: 30%;
}

.width-35 {
  width: 35%;
}

.width-40 {
  width: 40%;
}

.width-create-time {
  width: 80px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .width-create-time {
    width: auto;
    margin: 0 auto;
  }
}

// 主轴
$flex-jc: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly
);

// 侧轴
$flex-ai: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'stretch': stretch,
  'baseline': baseline
);

//主轴 在这里循环我们上面定义的选择项
@each $flexKey, $flexValue in $flex-jc {
  .jc-#{$flexKey} {
    justify-content: $flexValue;
  }
}

// 侧轴
@each $flexKey, $flexValue in $flex-ai {
  .ai-#{$flexKey} {
    align-items: $flexValue;
  }
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.text-ellipsis2 {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: bold;
}

.relative {
  position: relative;
}
